<!DOCTYPE html>
<html lang="zh-CN">
<head><!--头部-->
    <meta charset="utf-8">
    <meta name="keywords" content="关键词">
    <meta name="description" content="站点描述"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>个人信息</title>
    <link href="css/main.css" rel="stylesheet">
    <link type="text/css" href="css/wode.css" rel="stylesheet"/>
    <script src="js/rem.js"></script>
    <script src="js/jquery-3.1.js"></script>
    <script src="js/area.js"></script>
    <!--上传-->
    <script type="text/javascript" src="js/upload.js"></script>
</head>
<body style="visibility:hidden;">
<div class="header-title header-title2"><!--标题-->
    <a href="javascript:history.back()" class="back"></a>
    <p class="title">个人信息</p>
</div>
<div class="main-cont"><!--内容 begin-->
    <div class="buzhou"><!--步骤123-->
        <div class="line line1"><em></em></div>
        <ul>
            <li class="active">
                <span>1</span>
                <p>个人信息</p>
            </li>
            <li>
                <span>2</span>
                <p>运营商</p>
            </li>
<!--            <li>
                <span>3</span>
                <p>京东</p>
            </li>-->
        </ul>
    </div><!--步骤123 end-->
    <p class="shuoming shuoming1">请务必填写<em>真实信息</em>，提交后不可修改</p>
    <div class="basic-info"><!--基本信息-->
        <p class="title">基本信息</p>
        <div class="input-box">
            <span>姓名</span>
            <input id="name" type="text" placeholder="请输入您的姓名"/>
        </div>
        <div class="input-box">
            <span>手机号</span>
            <input id="phone" type="number" placeholder="请输入您的手机号"/>
        </div>
        <div class="input-box">
            <span>身份证号</span>
            <input id="idCard" type="text" placeholder="请输入您的身份证号"/>
        </div>
        <div class="input-box">
            <input type="hidden" id="identityFront"/>
            <span>身份证正面照(有国徽)<em>*</em></span>
            <div class="kaidian_dianpu">
                <div class="fabu_fengmian">
                    <div id="preview1">
                        <img id="defaultImg1" border=0 src="images/moren.jpg"/>
                    </div>
                    <div class="fabu_file1"><input type="file" onchange="previewImage(this,1)"/></div>
                </div>
            </div>
        </div>
        <div class="input-box">
            <input type="hidden" id="identityBack"/>
            <span>身份证背面照<em>*</em></span>
            <div class="kaidian_dianpu">
                <div class="fabu_fengmian">
                    <div id="preview2">
                        <img id="defaultImg2" border=0 src="images/moren.jpg"/>
                    </div>
                    <div class="fabu_file1"><input type="file" onchange="previewImage(this,2)"/></div>
                </div>
            </div>
        </div>
        <div class="input-box">
            <span>微信号</span>
            <input id="wxId" type="text" placeholder="请输入常用微信账号"/>
        </div>
        <div class="input-box input-box2">
            <span>现居住地</span>
            <select id="province">
                <option value="请选择">请选择</option>
            </select>
            <select id="city">
                <option value="请选择">请选择</option>
            </select>
            <select id="town">
                <option value="请选择">请选择</option>
            </select>
            <textarea id="addressDetails" placeholder="请输入详细地址"></textarea>
        </div>
    </div><!--基本信息 end-->
    <div class="contact-person"><!--紧急联系人-->
        <p class="title">紧急联系人 <em>(请至少填写一位直系亲属)</em></p>
        <div class="input-box">
            <span>联系人一</span>
            <input type="text" id="linkPersonNameOne" placeholder="请输入姓名"/>
        </div>
        <div class="input-box">
            <span>联系方式</span>
            <input type="number" id="linkPersonPhoneOne" placeholder="请输入手机号"/>
        </div>
        <div class="input-box">
            <span>关系</span>
            <input type="text" placeholder="请选择" id="linkPersonRelationOne" readonly="readonly" class="guanxi1"/>
            <span class="s-btn"></span>
        </div>
        <div class="input-box">
            <span>联系人二</span>
            <input type="text" id="linkPersonNameTwo" placeholder="请输入姓名"/>
        </div>
        <div class="input-box">
            <span>联系方式</span>
            <input type="number" id="linkPersonPhoneTwo" placeholder="请输入手机号"/>
        </div>
        <div class="input-box">
            <span>关系</span>
            <input type="text" id="linkPersonRelationTwo" placeholder="请选择" readonly="readonly" class="guanxi2"/>
            <span class="s-btn"></span>
        </div>
        <div class="input-mask mask-guanxi1">
            <p class="p1">请选择</p>
            <ul>
                <li>父母</li>
                <li>兄弟姐妹</li>
                <li>配偶</li>
                <li>子女</li>
                <li>同事</li>
                <li>同学</li>
                <li>朋友</li>
            </ul>
        </div>
        <div class="input-mask mask-guanxi2">
            <p class="p1">请选择</p>
            <ul>
                <li>父母</li>
                <li>兄弟姐妹</li>
                <li>配偶</li>
                <li>子女</li>
                <li>同事</li>
                <li>同学</li>
                <li>朋友</li>
            </ul>
        </div>
    </div><!--紧急联系人 end-->
    <div class="next-btn"><!--下一步按钮-->
        <input type="button" onclick="nextStep()" class="btn" value="下一步"/>
        <p class="yinhang"><em></em>银行级数据加密保护</p>
    </div>
</div><!--内容end-->

<script type="text/javascript" src="js/core.js"></script>
<script>
    $(function () {
        //1毫秒后显示页面
        setTimeout(showPage, 1);

        function showPage() {
            $('body').css({'visibility': 'visible'})
        }

        //关系弹出1
        $('.contact-person .guanxi1').click(function () {
            $('.contact-person .mask-guanxi1').animate({'bottom': '0'}, 500);
        })
        $('.contact-person .mask-guanxi1 li').click(function () {
            var liTxt = $(this).html();
            $('.contact-person .guanxi1').val(liTxt);
            $(this).parents('.mask-guanxi1').animate({'bottom': '-100%'}, 500)
        })
        //关系弹出2
        $('.contact-person .guanxi2').click(function () {
            $('.contact-person .mask-guanxi2').animate({'bottom': '0'}, 500);
        })
        $('.contact-person .mask-guanxi2 li').click(function () {
            var liTxt = $(this).html();
            $('.contact-person .guanxi2').val(liTxt);
            $(this).parents('.mask-guanxi2').animate({'bottom': '-100%'}, 500)
        })

    })
</script>
<script>

    //下一步
    function nextStep() {

        var userId=getvl("userId");

        var name = $("#name").val();
        var phone = $("#phone").val();
        var idCard = $("#idCard").val();
        var identityFront = $("#identityFront").val();
        var identityBack = $("#identityBack").val();
        var wxId = $("#wxId").val();
        var province = $("#province").val();
        var city = $("#province").val();
        var town = $("#town").val();
        var addressDetails = $("#addressDetails").val();
        var linkPersonNameOne = $("#linkPersonNameOne").val();
        var linkPersonPhoneOne = $("#linkPersonPhoneOne").val();
        var linkPersonRelationOne = $("#linkPersonRelationOne").val();
        var linkPersonNameTwo = $("#linkPersonNameTwo").val();
        var linkPersonPhoneTwo = $("#linkPersonPhoneTwo").val();
        var linkPersonRelationTwo = $("#linkPersonRelationTwo").val();

        if (name == "" || idCard == "" || wxId == "" || province == "" || city == "" || town == "" || addressDetails == "" || linkPersonNameOne == ""
            || linkPersonPhoneOne == "" || linkPersonRelationOne == "" || linkPersonNameTwo == "" || linkPersonPhoneTwo == "" || linkPersonRelationTwo == "") {
            alert("请完善信息");
            return;
        }


        if (!/^\d{17}(\d|x)$/i.test(idCard)) {
            alert("请输入正确的身份证号");
            return;
        }

        if(identityFront==""||identityBack==""){
            alert("请上传身份证照");
            return;
        }

        //手机号格式检查
        if (!checkPhone("phone")) {
            alert("请输入正确的手机号码");
            return;
        }
        if (!checkPhone("linkPersonPhoneOne")) {
            alert("请输入正确的手机号码");
            return;
        }
        if (!checkPhone("linkPersonPhoneTwo")) {
            alert("请输入正确的手机号码");
            return;
        }


        var user = {
            id:userId,
            userName: name,
            wxId: wxId,
            phone: phone
        };

        $.ajax({
            type: "POST",
            url: urlcore + "/api/user/add",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(user),
            success: function (data) {
                console.log("添加用户数据成功");
                console.log(data.data);
                userId = data.data.id;

                var userBaseInfo = {
                    userId: userId,
                    province: province,
                    city: city,
                    county: town,
                    addressDetails: addressDetails,
                    linkPersonNameOne: linkPersonNameOne,
                    linkPersonPhoneOne: linkPersonPhoneOne,
                    linkPersonRelationOne: linkPersonRelationOne,
                    linkPersonNameTwo: linkPersonNameTwo,
                    linkPersonPhoneTwo: linkPersonPhoneTwo,
                    linkPersonRelationTwo: linkPersonRelationTwo,
                };
                $.ajax({
                    type: "POST",
                    url: urlcore + "/api/userBasicMsg/add",
                    dataType: "json",
                    contentType: "application/json;charset=UTF-8",
                    data: JSON.stringify(userBaseInfo),
                    success: function (data) {
                        console.log("基本信息添加成功");
                        console.log(data.data);

                        var userIdentity = {
                            userId: userId,
                            userName: name,
                            identityNum: idCard,
                            identityFront:identityFront,
                            identityBack:identityBack
                        };

                        $.ajax({
                            type: "POST",
                            url: urlcore + "/api/userIdentity/add",
                            dataType: "json",
                            contentType: "application/json;charset=UTF-8",
                            data: JSON.stringify(userIdentity),
                            success: function (data) {
                                console.log("身份证信息添加成功");
                                console.log(data.data);
                                window.location.href = "page2.html?userId=" + userId;
                            },
                            error: function () {
                                alert("error")
                            }
                        });


                    },
                    error: function () {
                        alert("error")
                    }
                });
            },
            error: function () {
                alert("error")
            }
        });

    }

    function checkPhone(domId) {
        var phone = $('#' + domId).val();
        var result = false;
        if (phone.length == 11) {
            if ((CMCC.test(phone) || CUCC.test(phone) || CTCC.test(phone))) {
                result = true;
            }
        }
        if (!result) {
            $('#' + domId).focus();
        }
        return result;
    }
</script>
</body>
</html>
